<template>
  <view
    class="login-container"
    :style="containerStyle">
    <image
      class="title"
      src="../../static/login/title.png"></image>
    <image
      class="logo"
      src="../../static/login/logo.png"></image>
    <view class="login-form">
      <view class="login-form-item">
        <view class="label">账号</view>
        <view class="input">
          <input
            type="text"
            v-model="formData.loginName"
            placeholder="请输入账号" />
        </view>
      </view>
      <view class="login-form-item">
        <view class="label">密码</view>
        <view class="input">
          <password-input v-model="formData.password"></password-input>
        </view>
      </view>
      <view class="login-form-driver">.</view>
      <view class="login-form-item">
        <button
          class="login-btn"
          @click="loginIn">
          登 录
        </button>
      </view>
      <view class="login-form-item">
        <!-- <text class="forget-pwd">忘记密码？</text> -->
      </view>
    </view>
    <view class="company-name">星城前端团队 NoahLiu</view>
  </view>
</template>
<script setup lang="ts">
import { useCustomNavigationStore } from "@/store/customNavigationStore";
import { computed, onMounted, reactive, ref } from "vue";
import message from "@/util/message";

const store = useCustomNavigationStore();
let containerStyle = computed(() => {
  return `padding-top: ${store.customBar}px;`;
});

const formData = reactive({
  loginName: "",
  password: "",
});

function loginIn() {
  if (!formData.loginName) {
    message("请输入账号");
    return false;
  }

  if (!formData.password) {
    message("请输入密码");
    return false;
  }
  uni.showLoading({
    title: "正在登录...",
    mask: true,
  });
}

onMounted(() => {
});
</script>

<style lang="scss">
page,
.login-container {
  height: 100%;
}

.login-container {
  background-image: linear-gradient(225deg, #ffffff 0%, #eff1f5 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  .title {
    margin-top: 24upx;
    width: 440upx;
    height: 38upx;
  }
  .logo {
    margin-top: 24upx;
    width: 398upx;
    height: 396upx;
  }
  .login-form {
    flex: 1 0 auto;
    width: 670upx;
    .login-form-item {
      margin-top: 24upx;
      .label {
        padding: 0 40upx;
        font-size: 24upx;
        color: #171930;
      }
      .input {
        display: flex;
        height: 104upx;
        margin-top: 6upx;
        background-color: #ffffff;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        :deep(input) {
          flex: 1;
          font-size: 24upx;
          height: 104upx;
          line-height: 104upx;
          padding: 0 40upx;
        }
        :deep(password-input) {
          flex: 1 1 100%;
        }
      }
      .login-btn {
        border: 0;
        font-size: 24upx;
        height: 104upx;
        line-height: 104upx;
        color: #ffffff;
        background-image: linear-gradient(130deg, #266ed7 0%, #4d8aeb 100%);
        border-radius: 8px;
      }
      .forget-pwd {
        display: block;
        font-size: 24upx;
        color: #171930;
        line-height: 30upx;
        text-align: center;
        text-decoration: underline;
      }
    }
    .login-form-driver {
      margin: 70upx 0 46upx;
      height: 30upx;
      line-height: 30upx;
      text-align: center;
      position: relative;
      &::after,
      &::before {
        content: "";
        display: block;
        height: 1upx;
        width: 250upx;
        background-color: #dedfe3;
        position: absolute;
        top: 29upx;
      }
      &::before {
        left: 0;
      }
      &::after {
        right: 0;
      }
    }
  }
  .company-name {
    font-size: 24upx;
    color: #171930;
    line-height: 30upx;
    padding: 50upx 0;
  }
}
</style>
